<template>
  <div class="content">
    <show-info></show-info>
    <!--<button @click="name.value = 'kobe'">change name</button> 已经被解构为普通字符串而非响应式对象, 在 setup() 中返回的 name 是解构后的响应式对象，但模板中直接访问时可能被自动解包为原始值-->
    <button @click="name = 'kobe'">change name</button> 
    <button @click="age = 20">change age</button>
  </div>
</template>

<script>
  import { provide, ref } from 'vue'
  import showInfo from './ShowInfo.vue'
  export default {
    components: { showInfo },
    setup() {
      const name = ref('why')
      const age = ref(18)
      provide('name', name)
      provide('age', age)

      return {
        name,
        age
      }
    }
  }
</script>

<style scoped>
</style>